<template>
    <Card :bordered="false" dis-hover>
        <jgSearch :searchData="searchData" @on-enter="askDatasearch" @on-change-changesys="changeSys" @on-change-change="askDatasearch" @on-clear="askDatasearch" @click-click="openAdd"/>
        <Table  ref="table" highlight-row :loading="loading" :columns="columns" :data="list">
            <template slot="info" slot-scope="{row}">
                <div class="info">
                    <img :src="row.avatar" width="40px" height="40px" alt="">
                    <div class="text">
                        <p>{{row.wechatnick}}</p>
                        <p>微信号：{{row.wechatno}}</p>
                    </div>
                </div>
            </template>
            <template slot="operation" slot-scope="{row}">
                <a @click="openBind(row)" v-hasC="{
                    name: 'v1-clique-authorization-bind',
                    flag: 'v1/clique/authorization/bind',
                }">{{row.deviceid!==''?'重新绑定':'绑定设备'}}</a>
                <Divider
                    type="vertical"
                    v-hasC="{
                        name: 'v1-clique-authorization-bind',
                        flag: 'v1/clique/authorization/bind',
                    }"
                />
                <a @click="handleDel(row)" v-hasC="{
                    name: 'v1-clique-authorization-del',
                    flag: 'v1/clique/authorization/del',
                }" :disabled="row.use_state==1">删除</a>
            </template>
            
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page
                show-total
                show-elevator
                show-sizer
                :total='total'
                :current.sync='params.page'
                :page-size='params.pageSize'
                @on-change='changepage'
                @on-page-size-change='changepageSize'
            />
        </div>
        <Modal v-model="showedit" title="新增" :mask-closable='false' draggable sticky reset-drag-position >
            <Form :label-width="0" :model="formItem" ref="formItem" :rules="createRules1">   
                <FormItem label="" prop="code">      
                    <Input v-model="formItem.code" type="textarea" :rows="10" placeholder="请输入授权码，一行一条记录"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="showedit=false" >取消</Button>
                <Button type="primary" @click="submitedit()" >确定</Button>
            </div>
        </Modal>
        <Modal v-model="showBind" title="绑定设备" :mask-closable='false' draggable sticky reset-drag-position >
            <Form :label-width="80" :model="bindParams" ref="formItem1" :rules="createRules">     
                <FormItem label="设备ID" prop="deviceid">  
                    <Input v-model="bindParams.deviceid" placeholder="请输入设备ID" />
                </FormItem>
                <FormItem label="备注" prop="remark">  
                   <Input v-model="bindParams.remark" type="textarea" :rows="5" placeholder="备注" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="showBind=false" >取消</Button>
                <Button type="primary" @click="submitbind()" >确定</Button>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import jgSearch from '@/components/search';
    import {
        codeList,
        codeCondition,
        codeAdd,
        codeDel,
        codeBind
    } from '@/api/jzy';
    export default {
        components: { jgSearch },
        data () {
            return {
                loading:false,
                showedit:false,
                showBind:false,
                byProjects:[],
                dtProjects:[],
                searchData: {
                    project: [
                        { key: 'Input', style: { width: '200px' }, value: '', clearable: true, placeholder: '请输入授码码、设备ID', callback: '' },
                        {
                            key: 'Select',
                            placeholder: '系统筛选',
                            clearable: true,
                            style: { width: '100px' },
                            value: '',
                            childList: [{label:'灯塔',value:1},{label:'白友',value:2}],
                            callback: 'changesys'
                        },
                        {
                            key: 'Select',
                            placeholder: '项目筛选',
                            clearable: true,
                            style: { width: '100px' },
                            value: '',
                            show:{key:false},
                            childList: [],
                            callback: 'change'
                        },
                        {
                            key: 'Select',
                            placeholder: '状态',
                            clearable: true,
                            style: { width: '100px' },
                            value: '',
                            childList: [],
                            callback: 'change'
                        }
                    ],
                    button: [
                        { key: '新增', callback: 'click' ,has:{
                        name: 'v1-clique-authorization-add',
                        flag: 'v1/clique/authorization/add',
                    }}
                    ]
                },
                columns: [
                    { title: '授权码', key: 'code', minWidth: 120,fixed:'left'  },
                    { title: '设备ID', key: 'deviceid', minWidth: 165,},
                    { title: '所属系统', key: 'sys_str', minWidth: 100,},
                    { title: '所属项目', key: 'project', minWidth: 100 },
                    { title: '使用人', key: 'realname', minWidth: 100 },
                    { title: '最近登录时间', key: 'login_time', minWidth: 170 },
                    { title: '状态', key: 'use_state_str', minWidth: 100 },
                    { title: '使用时间', key: 'bind_time', minWidth: 170 },
                    { title: '创建时间', key: 'created_at', minWidth: 170 },
                    { title: '操作', slot: 'operation', minWidth: 165,fixed:'right' }
                ],
                createRules1: {
                    code: [{ required: true, type: 'string', message: '请输入授权码', trigger: 'blur' }],
                },
                createRules: {
                    deviceid: [{ required: true, type: 'string', message: '请输入设备ID', trigger: 'blur' }],
                },
                params: { page: 1, pageSize: 10, keyword: '',use_state: '',project_id: '',sys_id:'' },
                list: [],
                total:0,
                formItem: {
                    code: ''
                },
                bindParams:{
                    id:'',
                    deviceid:'',
                    remark:''
                },
                // tableHeight: 500,
                state: false,
                modal: false,
            };
        },
        mounted() {
        // 设置表格高度
        // this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 180;
        this.askData()
        codeCondition().then(res=>{
            this.searchData.project[3].childList=this.transData(res.use_state)
            this.byProjects=this.transData(res.by)
            this.dtProjects=this.transData(res.dt)
        })
        }, 
        methods: {
            transData(arr){
                let res=[]
                arr.forEach(item => {
                    res.push(
                        {
                            label:item.name,
                            value:item.id
                        }
                    )
                });
                return res;
            },
            askData () {
                this.loading=true
                let params
                if(this.params.use_state!==''){
                    params=this.params
                }else{
                    params= { 
                        page: this.params.page, 
                        pageSize: this.params.pageSize, 
                        keyword: this.params.keyword,
                        project_id: this.params.project_id,
                        sys_id:this.params.sys_id 
                    }
                }
                
                codeList(params).then(res=>{
                    this.list=res.list
                    this.total=res.total
                    this.loading=false
                })
                .catch(() => {
                  this.loading=false
                });
            },
            changepage(e){
                this.params.page=e
                this.askData()
            },
            changepageSize(e){
                this.params.pageSize=e
                this.askData()
            },
            searchparams () {
                this.params.page=1 
                this.params.keyword = this.searchData.project[0].value;
                this.params.sys_id = this.searchData.project[1].value?this.searchData.project[1].value:'';
                this.params.project_id =this.searchData.project[2].value=this.params.sys_id? this.searchData.project[2].value:'';
                this.params.use_state = this.searchData.project[3].value;
            },
            askDatasearch(){
                this.searchparams()
                this.askData()
            },
            changeSys(e){
               if(e==1){
                   this.searchData.project[2].show.key=true
                   this.searchData.project[2].childList=this.dtProjects;
               }else if(e==2){
                   this.searchData.project[2].show.key=true
                   this.searchData.project[2].childList=this.byProjects;
               }else{
                   this.searchData.project[2].show.key=false
                   this.searchData.project[2].childList=[]
               }
               this.params.sys_id = e
               this.params.project_id=''
               this.params.page=1 
                this.askData()
            },
            openAdd(){
                this.showedit=true;
                this.$refs['formItem'].resetFields();
            },
            handleDel(e){                
                this.$Modal.confirm({
                    title: '删除提醒',
                    content: '删除后无法恢复，是否确认删除?',
                    onOk: () => {
                        codeDel({ id: e.id}).then(res => {
                           this.askData()
                        })
                    }
                })
            },
            submitedit(){
                this.$refs['formItem'].validate(valid => {
                    if(valid) {
                        codeAdd(this.formItem).then(res=>{
                            this.$Message.success('添加成功')
                            this.showedit=false
                            this.params.page=1
                            this.askData()
                        })
                        .catch(() => {
                        this.showedit=false
                        });
                    }
                });
                
            },
            openBind(e){
                this.$refs['formItem1'].resetFields();
                this.showBind=true
                if(e.deviceid!==''){
                    this.bindParams.deviceid=e.deviceid
                    this.bindParams.remark=e.remark
                }
                this.bindParams.id=e.id
            },
            submitbind(){
                 this.$refs['formItem1'].validate(valid => {
                    if(valid) {
                        codeBind(this.bindParams).then(res=>{
                            this.$Message.success('绑定成功')
                            this.showBind=false
                            this.askData()
                        })
                        .catch(() => {
                        this.showBind=false
                        });
                    }
                });
                
            }
        }
            
    };
</script>
<style lang="less" scoped>
    .info{
        display: flex;
        align-items: center;
    }
    .info img{
        margin-right: 5px;
    }
    .info .text{
        font-size: 12px;
    }
</style>